var React = require('react');
import { Component } from 'react-native';



import {
    ScrollView,
    StyleSheet,
    Image,
    Text,
    View
} from 'react-native';

import {styles} from '../common/style';
import { HeadApp, MenuApp, SliderView , LoadingView } from './HeadMenu';
import Icon from 'react-native-vector-icons/Foundation';


var Itemurl = "http://101.200.130.104/DotaVideoApi/?r=Youku/GetSokuUser&data={q:'纪录',cp:1}";


var Vlist = React.createClass({

    _renderVlist: function(){
        return this.props.row.map(function(item, key){
            return (
                <View style={[styles.VlistBox]} key={key}>
                    <Image source={{uri: item.pic}} style={[styles.Vlistimg]}>
                        <View style={[styles.Vlistduration]}>
                            <Text style={[styles.textWhite]}>{item.duration}</Text>
                        </View>
                    </Image>
                    <View style={[styles.Vlistname]}>
                        <Text style={[styles.Vlistinfo]}>{item.name}</Text>
                    </View>

                </View>
            )
        })
    },

    render: function(){
        return (
            <View style={[styles.cateTable]}>
                {
                    this._renderVlist()
                }
            </View>
        )
    }

});


var MovieView = React.createClass({

    getInitialState: function(){
        return {
            itemMovie: null
        }
    },

    componentDidMount: function(){
        this.fetchData();
    },

    fetchData: function(){
        fetch(Itemurl)
            .then((response) => response.json())
            .then((response) => {
                var data = response.data
                this.setState({
                    itemMovie: data
                })

            })
    },


    CategoryView: function(){
        return this.state.itemMovie.map(function(catetory, key){
            console.log(catetory);
            return (
                <View style={[styles.categoryBox]} key={key}>
                    <View style={[styles.cateTitle]}>
                        <View style={[styles.Row]}>
                            <Icon name="graph-bar" size={15} color="#00bdd4"/>
                            <Text style={[styles.cateName]}>{catetory.uname}</Text>
                        </View>
                        <Text style={[styles.more]}>更多 ></Text>
                    </View>


                    <Vlist row={catetory.vlist}/>

                </View>

            )
        })
    },



    render: function(){
        if( !this.state.itemMovie ){
            return ( <LoadingView></LoadingView> )
        }

        return (
        <View style={[styles.content]}>

            <HeadApp></HeadApp>

            <View style={[styles.container]} >
                <ScrollView>
                    <SliderView></SliderView>
                    <View>
                        {
                            this.CategoryView() || null
                        }
                    </View>

                </ScrollView>
            </View>

            <MenuApp></MenuApp>
        </View>

        )
    }

});






module.exports = {
    MovieView: MovieView
}